<template>
  <div>
    <Header_h />
    <div class="sq_box_content">
      <bannerInfo :info="info" />
    </div>
    <div class="new_box_bgcolor">
      <div class="container">
        <el-tabs v-model="active" @tab-click="handleClick">
          <!-- 专利奖 -->
          <el-tab-pane label="专利奖">
            <div class="new_box">
              <div class="container">
                <section class="session" style="padding: 20px 0px 0px 0px">
                  <div class="s_flex">
                    <div class="mr_r">
                      <el-select
                        class="select_widths"
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.years"
                        placeholder="年份"
                        @change="changeYears"
                      >
                        <el-option
                          v-for="item in years"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="mr_r">
                      <el-select
                        class="select_widths select_pad"
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.prize_name"
                        placeholder="获得奖项"
                        @change="changeYears2"
                      >
                        <el-option
                          v-for="(item, index) in prize_name"
                          :key="index"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="mr_r">
                      <el-select
                        class="select_widths select_pad"
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.address"
                        placeholder="街镇"
                        @change="changeYears3"
                      >
                        <el-option
                          v-for="(item, index) in address"
                          :key="index"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="primaryCoverage">
                    <div class="j_award">
                      <div
                        class="
                          s_flex
                          s_align_items_center
                          s_justify_content_between
                          s_flex_column
                          grayBorder
                        "
                        v-for="item in list.list"
                        :key="item.id"
                      >
                        <div class="j_award_item line_h_26">
                          {{ item.years }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.prize_name }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.name }}
                        </div>
                        <div class="j_award_item line_h_26">{{ item.ano }}</div>
                        <div class="j_award_item line_h_26">
                          {{ item.company }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.address }}
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
                <div class="pagination">
                  <el-pagination
                    background
                    small
                    :current-page="list.page"
                    :page-size="list.size"
                    layout="total, prev, pager, next, jumper"
                    :total="parseInt(list.count)"
                    align="left"
                    @current-change="handleCurrentChange"
                    :pager-count="5"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- 驰名商标 -->
          <el-tab-pane label="驰名商标">
            <div class="new_box">
              <div class="container">
                <section class="session" style="padding: 20px 0px 0px 0px">
                  <div class="s_flex">
                    <div class="mr_r">
                      <el-select
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.years"
                        placeholder="年份"
                        @change="changeYears"
                      >
                        <el-option
                          v-for="item in years"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                    <div style="margin-left: 55px">
                      <el-select
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.address"
                        placeholder="街道"
                        @change="changeYears3"
                      >
                        <el-option
                          v-for="(item, index) in address"
                          :key="index"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="primaryCoverage">
                    <div class="j_award">
                      <div
                        class="
                          s_flex
                          s_align_items_center
                          s_justify_content_between
                          s_flex_column
                          grayBorder
                        "
                        v-for="item in list.list"
                        :key="item.id"
                      >
                        <div class="j_award_item line_h_26">
                          {{ item.trade_name }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.trade_shop }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.reg_num }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.name }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.years }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.address }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- <div v-for="item in list" :key="item.id">{{ item }}</div> -->
                </section>
                <div class="pagination">
                  <el-pagination
                    background
                    small
                    :current-page="list.page"
                    :page-size="list.size"
                    layout="total, prev, pager, next, jumper"
                    :total="parseInt(list.count)"
                    align="left"
                    @current-change="trademarkCurrentChange"
                    :pager-count="5"
                  />
                </div>
              </div>
            </div>
            <!-- {{ list }} -->
          </el-tab-pane>
          <!-- 国家示范企业 -->
          <el-tab-pane label="国家示范企业">
            <div class="new_box">
              <div class="container">
                <section class="session" style="padding: 20px 0px 0px 0px">
                  <div class="s_flex">
                    <div class="mr_r">
                      <el-select
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.years"
                        placeholder="年份"
                        @change="changeYears"
                      >
                        <el-option
                          v-for="item in years"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                    <div style="margin-left: 55px">
                      <el-select
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.address"
                        placeholder="街道"
                        @change="changeYears3"
                      >
                        <el-option
                          v-for="(item, index) in address"
                          :key="index"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="primaryCoverage">
                    <div class="j_award">
                      <div
                        class="
                          s_flex
                          s_align_items_center
                          s_justify_content_between
                          s_flex_column
                          grayBorder
                        "
                        v-for="item in list.list"
                        :key="item.id"
                      >
                        <div class="j_award_item line_h_26">
                          {{ item.years }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.name }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.address }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- <div v-for="item in list" :key="item.id">{{ item }}</div> -->
                </section>
                <div class="pagination">
                  <el-pagination
                    background
                    small
                    :current-page="list.page"
                    :page-size="list.size"
                    layout="total, prev, pager, next, jumper"
                    :total="parseInt(list.count)"
                    align="left"
                    @current-change="demonstrationCurrentChange"
                    :pager-count="5"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- 省级示范企业 -->
          <el-tab-pane label="省级示范企业">
            <div class="new_box">
              <div class="container">
                <section class="session" style="padding: 20px 0px 0px 0px">
                  <div class="s_flex">
                    <div class="mr_r">
                      <el-select
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.years"
                        placeholder="年份"
                        @change="changeYears"
                      >
                        <el-option
                          v-for="item in years"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                    <div style="margin-left: 55px">
                      <el-select
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.address"
                        placeholder="街道"
                        @change="changeYears3"
                      >
                        <el-option
                          v-for="(item, index) in address"
                          :key="index"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="primaryCoverage">
                    <div class="j_award">
                      <div
                        class="
                          s_flex
                          s_align_items_center
                          s_justify_content_between
                          s_flex_column
                          grayBorder
                        "
                        v-for="item in list.list"
                        :key="item.id"
                      >
                        <div class="j_award_item line_h_26">
                          {{ item.years }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.name }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.address }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- <div v-for="item in list" :key="item.id">{{ item }}</div> -->
                </section>
                <div class="pagination">
                  <el-pagination
                    background
                    small
                    :current-page="list.page"
                    :page-size="list.size"
                    layout="total, prev, pager, next, jumper"
                    :total="parseInt(list.count)"
                    align="left"
                    @current-change="provinceCurrentChange"
                    :pager-count="5"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- 国家优势企业 -->
          <el-tab-pane label="国家优势企业">
            <div class="new_box">
              <div class="container">
                <section class="session" style="padding: 20px 0px 0px 0px">
                  <div class="s_flex">
                    <div class="mr_r">
                      <el-select
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.years"
                        placeholder="年份"
                        @change="changeYears"
                      >
                        <el-option
                          v-for="item in years"
                          :key="item"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                    <div style="margin-left: 55px">
                      <el-select
                        clearable
                        @clear="clearValue"
                        v-model="selectFrom.address"
                        placeholder="街道"
                        @change="changeYears3"
                      >
                        <el-option
                          v-for="(item, index) in address"
                          :key="index"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="primaryCoverage">
                    <div class="j_award">
                      <div
                        class="
                          s_flex
                          s_align_items_center
                          s_justify_content_between
                          s_flex_column
                          grayBorder
                        "
                        v-for="item in list.list"
                        :key="item.id"
                      >
                        <div class="j_award_item line_h_26">
                          {{ item.years }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.name }}
                        </div>
                        <div class="j_award_item line_h_26">
                          {{ item.address }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- <div v-for="item in list" :key="item.id">{{ item }}</div> -->
                </section>
                <div class="pagination">
                  <el-pagination
                    background
                    :current-page="list.page"
                    :page-size="list.size"
                    layout="total, prev, pager, next, jumper"
                    :total="parseInt(list.count)"
                    align="left"
                    @current-change="advantageCurrentChange"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <Footer />
    <rightMenu @moveTo="moveTo" />
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import bannerInfo from "@/components/web/bannerInfo";
import leftMenu from "@/components/web/leftMenu";
import {
  prizeList,
  getPrizeYears,
  getExamplesList,
  getPatentList,
  getTrademarkeList,
} from "@/api/web";
import rightMenu from "@/components/web/rightMenu";

export default {
  components: {
    Header_h,
    Footer,
    bannerInfo,
    leftMenu,
    rightMenu,
  },
  data() {
    return {
      info: {
        title: "顺德荣誉",
        content: "专利奖、商标、国家示范、省示范、国家优势",
        img: require("@/assets/web/banner1.png"),
      },
      value: "",
      yearsValue: "",
      list: [],
      prize_name: [],
      keywordIndex: 0,
      years: [],
      address: [],
      selectFrom: {
        prize_name: "",
        years: "",
        address: "",
      },
      params: {
        table: "patent",
      },
      active: 0,
      type: 0,
    };
  },
  mounted() {
    this.getList();
    this.getYears();
  },
  methods: {
    // 专利奖分页
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const list = await getPatentList({
          ...this.selectFrom,
          page: currentPage,
        });
        this.list = list;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    changeYears(val) {
      // console.log(val);
      this.selectFrom.years = val;
      this.getList();
      this.getYears();
    },
    changeYears2(val) {
      // console.log(val);
      this.selectFrom.prize_name = val;
      this.getList();
      this.getYears();
    },
    changeYears3(val) {
      // console.log(val);
      this.selectFrom.address = val;
      this.getList();
      this.getYears();
    },
    // 驰名商标分页
    //点击第几页
    async trademarkCurrentChange(currentPage) {
      try {
        const list = await getTrademarkeList({
          ...this.selectFrom,
          page: currentPage,
        });
        this.list = list;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    // 国家示范企业分页
    //点击第几页
    async demonstrationCurrentChange(currentPage) {
      try {
        const list = await getExamplesList({
          ...this.selectFrom,
          page: currentPage,
          type: this.type,
        });
        this.list = list;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    // 省份示范企业分页
    //点击第几页
    async provinceCurrentChange(currentPage) {
      try {
        const list = await getExamplesList({
          ...this.selectFrom,
          page: currentPage,
          type: this.type,
        });
        this.list = list;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    // 国家优势企业分页
    //点击第几页
    async advantageCurrentChange(currentPage) {
      try {
        const list = await getExamplesList({
          ...this.selectFrom,
          page: currentPage,
          type: this.type,
        });
        this.list = list;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    handleClick(tab, event) {
      this.selectFrom.years = "";
      this.selectFrom.prize_name = "";
      this.selectFrom.address = "";
      this.active = tab.index;
      if (tab.index === "0") {
        this.params.table = "patent";
      }
      if (tab.index === "1") {
        this.params.table = "trademark";
      }
      if (tab.index === "2") {
        this.params.table = "examples";
        this.type = 1;
      }
      if (tab.index === "3") {
        this.params.table = "examples";
        this.type = 2;
      }
      if (tab.index === "4") {
        this.params.table = "examples";
        this.type = 3;
      }

      this.getList();
      this.getYears();
      // const params = { table, type };
      // this.params = params;
    },
    clearValue() {
      this.getList();
      // this.trademarkList()
      // this.enterpriseList()
      // this.provinceList()
      // this.advantageList()
    },
    moveTo() {
      window.scrollTo(0, 0);
    },
    async getYears(params) {
      try {
        const res = await getPrizeYears({
          table: this.params.table,
          ...this.selectFrom,
          type: this.type,
        });
        this.years = res.years;
        this.prize_name = res.prize_name;
        this.address = res.address;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    // 专利奖
    async getList() {
      try {
        if (this.active == 0) {
          const list = await getPatentList({
            ...this.selectFrom,
          });
          this.list = list;
        } else if (this.active == 1) {
          const list = await getTrademarkeList({
            ...this.selectFrom,
          });

          this.list = list;
        } else if (this.active > 1) {
          const list = await getExamplesList({
            ...this.selectFrom,
            type: this.type,
          });
          this.list = list;
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    checkItem(index) {
      this.active = index;
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  width: 90%;
  margin: 25px auto;
}
.grayBorder:nth-child(odd) {
  background: #f7f9fc;
}
.grayBorder {
  border-bottom: 1px solid #ccc;
  padding: 20px 30px;
}
/deep/.el-tabs__nav-scroll {
  // margin-left: 19%;
}
/* core_content */
.mr_r {
  // margin-right: 50px;
  .select_pad {
    margin-left: 55px;
  }
  .select_widths {
    width: auto;
  }
}
.j_award {
  width: 100%;
  background: #ffffff;
  // box-shadow: 3px 1px 21px 0px rgba(97, 98, 97, 0.15);
  border-radius: 10px;
  .j_title {
    font-size: 22px;
    font-weight: bold;
    color: #d1283d;
    border-bottom: 1px solid #d1283d;
    padding-bottom: 20px;
  }
  .j_award_item {
    margin-top: 20px;
    width: 23%;
    text-align: center;
  }
  .j_award_br {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color9);
  }
  .j_award_br:last-child {
    border: 0;
  }
}

.y_award {
  .j_title {
    color: #263f8c;
    border-bottom: 1px solid #263f8c;
  }
}

.x_award {
  .j_title {
    color: #cc7620;
    border-bottom: 1px solid #cc7620;
  }
}
.primaryCoverage {
  width: 100%;
  margin-top: 50px;
  background-color: #ffffff;
  box-shadow: 3px 1px 21px 0px rgba(97, 98, 97, 0.15);
}
/* core_content */

@media (max-width: 1360px) {
  /deep/.el-tabs__nav-scroll {
    // margin-left: 6%;
  }
}
@media (max-width: 750px) {
  .core_content .item_list_img {
    width: 100%;
    height: 127px;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .core_content_left {
    width: 100%;
    background-color: #fff;
    height: 100%;
  }
  .mr_r {
    .select_widths {
      width: 98%;
    }
    .select_pad {
      margin-left: 0;
    }
  }

  .core_content {
    padding: 20px 0;
  }
  .j_award .j_award_item {
    width: 100%;
  }
  .j_award {
    padding: 20px 15px;
  }
  .j_award .s_flex {
    padding: 0 0 20px;
    border-bottom: 1px solid var(--color9);
    &:last-child {
      border: 0;
    }
  }
}
</style>


.grayBorder {
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}
/deep/.el-tabs__nav-scroll {
  // margin-left: 19%;
}
/* core_content */
.mr_r {
  // margin-right: 50px;
}
.j_award {
  width: 100%;
  background: #ffffff;
  // box-shadow: 3px 1px 21px 0px rgba(97, 98, 97, 0.15);
  border-radius: 10px;
  padding: 0px 30px;
  .j_title {
    font-size: 22px;
    font-weight: bold;
    color: #d1283d;
    border-bottom: 1px solid #d1283d;
    padding-bottom: 20px;
  }
  .j_award_item {
    margin-top: 20px;
    width: 23%;
    text-align: center;
  }
  .j_award_br {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color9);
  }
  .j_award_br:last-child {
    border: 0;
  }
}

.y_award {
  .j_title {
    color: #263f8c;
    border-bottom: 1px solid #263f8c;
  }
}

.x_award {
  .j_title {
    color: #cc7620;
    border-bottom: 1px solid #cc7620;
  }
}
.primaryCoverage {
  width: 100%;
  margin-top: 50px;
  background-color: #ffffff;
  box-shadow: 3px 1px 21px 0px rgba(97, 98, 97, 0.15);
}
/* core_content */

@media (max-width: 750px) {
  .core_content .item_list_img {
    width: 100%;
    height: 127px;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .core_content_left {
    width: 100%;
    background-color: #fff;
    height: 100%;
  }
  .core_content {
    padding: 20px 0;
  }
  .j_award .j_award_item {
    width: 100%;
  }
  .j_award {
    padding: 20px 15px;
  }
  .j_award .s_flex {
    padding: 0 0 20px;
    border-bottom: 1px solid var(--color9);
    &:last-child {
      border: 0;
    }
  }
}
